﻿@using xConnected.Common.ExpertProfile
<div class="modal-middle hide fade" id="EducationProfileDialog" style="display: none;" >
<div class="modal-header"></div>
    <div class="modal-body-higher">
        <div class="thumbnail">
            <div class="row-fluid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px">
                <span data-bind="visible: $root.profile.workingESkillVisible"><strong>@Resources.AddEducationSkill</strong></span>
                <a href="#" data-bind="visible: $root.profile.workingESkillNotVisible, click: function(){$root.profile.workingESkillVisible(true); $root.profile.workingESkillNotVisible(false);}"><strong>@Resources.AddEducationSkill</strong></a>
                <div class="alert alert-error" data-bind="visible: $root.profile.educSkillAlertVisible" style="text-align: center; margin-right: 20px; margin-top: 20px">@Resources.Pleasecorrectyourerrorsbeforeaddingeditingthiseducationskill</div>
                <hr/>
                <div style="padding-top: 10px" data-bind="with: workingEducationSkill, visible: $root.profile.workingESkillVisible">
                    <div class="control-group" data-bind="css: {'error': Program.isValid() == false }" >
                        <label class="control-label">@Resources.Program *</label>
                        <input type="text" class="span6" data-bind="value: Program"/>
                        <span class="help-inline" data-bind="validationMessage: Program"></span>
                    </div>
                    <div class="control-group" data-bind="css: {'error': University.isValid() == false }" >
                        <label class="control-label">@Resources.University *</label>
                        <input type="text" class="span6" data-bind="value: University"/>
                        <span class="help-inline" data-bind="validationMessage: University"></span>
                    </div>
                    <div class="control-group" data-bind="css: {'error': EducationId.isValid() == false }" >
                        <label class="control-label">@Resources.Education *</label>
                        <select class="span4" id="eSkillProfile" data-bind="options: $root.profile.availableEducations, optionsText: 'Description', optionsValue: 'Id', value: EducationId"></select>
                        <span class="help-inline" data-bind="validationMessage: EducationId"></span>
                    </div>
                    <div class="control-group" data-bind="css: {'error': StartYear.isValid() == false }" >
                        <label class="control-label">@Resources.StartYear *</label>
                        <input type="text" class="span4" data-bind="value: StartYear"/>
                        <span class="help-inline" data-bind="validationMessage: StartYear"></span>
                    </div>
                    <div class="control-group" data-bind="css: {'error': EndYear.isValid() == false }" >
                        <label class="control-label">@Resources.EndYear</label>
                        <input type="text" class="span4" data-bind="value: EndYear"/>
                        <span class="help-inline" data-bind="validationMessage: EndYear"></span>
                    </div>
                <hr style="margin-right: 10px"/>
                <div class="thumbnail" style="margin-right: 20px">
                    <div class="row-fluid">
                        <button  class="btn btn-medium pull-right" data-bind="visible: $root.profile.educSkillPlusButtonVisible, click: function() { $root.profile.addEducationSkill();}"><i class="icon-plus"></i></button> 
                        <button  class="btn btn-medium pull-right" data-bind="visible: $root.profile.educSkillOkButtonVisible, click: function() { $root.profile.okEducationSkill();}"><i class="icon-ok"></i></button>   
                    </div>
                </div>
                 </div>
            </div>
        </div>
        <div class="thumbnail"  data-bind="with: workingProfileBuffer"  style="margin-top: 20px">
            <div class="row-fluid" style="margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 10px">
                <span><strong>@Resources.SelectedEducationSkills</strong></span>
                <div style="padding-top: 10px">
                    <ul class="thumbnails" data-bind="foreach: EducationSkills">
                        <li class="span4">
                            <div class="thumbnail" style="height: 100px">
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Program: </span><span data-bind=" text: Program" style="font-size: smaller"></span>
                                    <button class="btn btn-mini pull-right" data-bind="click: function() { $root.profile.editEducationSkill($data); }"><i class="icon-pencil"></i></button>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.University: </span><span data-bind=" text: University" style="font-size: smaller"></span>
                                    <button class="btn btn-mini pull-right" data-bind="click: function() { $root.profile.removeEducationSkill($data); }"><i class="icon-trash"></i></button>
                                </div>
                                <div class="row-fluid">
                                    <span  style="font-size: smaller; font-weight: bold">@Resources.Degree: </span><span data-bind=" text: EducationName" style="font-size: smaller"></span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-small btn-info" data-bind="click: function() { $root.profile.okEducation();}"><strong>@Resources.Ok</strong></a>
        <a href="#" class="btn btn-small" data-bind="click: function() { $root.profile.cancelEducation();}"><strong>@Resources.Cancel</strong></a>
    </div>
</div>